<!DOCTYPE html>
<html>
<head>
<title>jquery.dataTables</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="css/jquery.dataTables.css" />
<style>
.TabBox{height:500px;overflow-y:auto;overflow-x:hidden;}
</style>
</head>
<body>
<div class="TabBox">
	<table class="data-table" width="100%">
      <thead>
        <tr>
          <th class="nosort">Rendering engine</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 5.0</td>
          <td>Win 95+</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 5.5</td>
          <td>Win 95+</td>
          <td>5.5</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 6</td>
          <td>Win 98+</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet Explorer 7</td>
          <td>Win XP SP2+</td>
          <td>7</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>AOL browser (AOL desktop)</td>
          <td>Win XP</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Firefox 1.0</td>
          <td>Win 98+ / OSX.2+</td>
          <td>1.7</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Firefox 1.5</td>
          <td>Win 98+ / OSX.2+</td>
          <td>1.8</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Firefox 2.0</td>
          <td>Win 98+ / OSX.2+</td>
          <td>1.8</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Firefox 3.0</td>
          <td>Win 2k+ / OSX.3+</td>
          <td>1.9</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Camino 1.0</td>
          <td>OSX.2+</td>
          <td>1.8</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Camino 1.5</td>
          <td>OSX.3+</td>
          <td>1.8</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape 7.2</td>
          <td>Win 95+ / Mac OS 8.6-9.2</td>
          <td>1.7</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape Browser 8</td>
          <td>Win 98SE+</td>
          <td>1.7</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape Navigator 9</td>
          <td>Win 98+ / OSX.2+</td>
          <td>1.8</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.0</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.1</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.1</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.2</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.3</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.3</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.4</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.4</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.5</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.5</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.6</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.6</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.7</td>
          <td>Win 98+ / OSX.1+</td>
          <td>1.7</td>
        </tr>
      </tbody>
    </table>
</div><!--TabBox-->

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.dataTables.js"></script> 
<script>
$(document).ready(function(){
	$('.data-table').dataTable({
		"searching": false,  //是否允许Datatables开启本地搜索
		"paging": false,  //是否开启本地分页
		"lengthChange": false,  //是否允许用户改变表格每页显示的记录数
		"info": false,   //控制是否显示表格左下角的信息
		"columnDefs": [{
			"targets": 'nosort',  //列的样式名
			"orderable": false    //包含上样式名‘nosort’的禁止排序
		}],
		//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
        "order": [3]  //asc升序   desc降序  "order": [[ 3, "desc" ]]默认第四列为降序排列
	});
});
</script>
</body>
</html>
